<template>
  <div class="bg-style">
    <i-pageBody class="add_color">
      <div slot="page-main">
        <div class="container">
          <div class="part-1">
            <div class="electric-bus">
              <div class="title">
                <div>母线</div>
                <div>并网点总有功功率：{{ lineArr.bwdPower | noDataFormat}}kW</div>
              </div>
              <template>
                <div class="bus-border" :class="{ isTopBorder: true }">
                  <div>光伏一线</div>
                  <div></div>
                </div>
                <div
                        class="bus-status"
                        v-if="lineArr.twoEnergyInfos && lineArr.twoEnergyInfos.length > 0"
                >
                  <div
                          v-for="(item, index) in lineArr.twoEnergyInfos"
                          :key="index"
                          class="status-icon-item"
                  >
                    <div class="line"></div>
                    <Tooltip placement="right" theme="light">
                      <img
                              src="~@/assets/img/distributedPhotovoltaic/5.png"
                              height="25"
                              width="23"
                      />
                      <div slot="content">
                        <!--<p>-->
                        <!--&lt;!&ndash;高压侧电压：{{ item.iesmegtransformer.highvoltage }}&ndash;&gt;-->
                        <!--</p>-->
                        <!--<p>-->
                        <!--低压侧电压：{{ item.iesmegtransformer.lowvoltage }}-->
                        <!--</p>-->
                        <div class="tooltip-title">变压器</div>
                        <div style="display: flex">
                          <div style="margin-right:10px">高压侧</div>
                          <div style="display: flex">
                            <div style="margin-right:10px">
                              <div>Uab<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.highUab | noDataFormat}}kV</span>

                              </div>
                              <div>Ubc<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.highUbc | noDataFormat}}kV</span>
                              </div>
                              <div>Uca<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.highUca | noDataFormat}}kV</span>
                              </div>
                            </div>
                            <div>
                              <div>Ia<span style="padding-left:5px;padding-right:15px">

                                {{item.iesmegtransformer.highIa | noDataFormat}}A</span>
                              </div>
                              <div>Ib<span style="padding-left:5px;padding-right:15px">

                                {{item.iesmegtransformer.highIb | noDataFormat}}A</span>
                              </div>
                              <div>Ic<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.highIc | noDataFormat}}A</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="display: flex">
                          <div style="margin-right:10px">低压侧</div>
                          <div style="display: flex">
                            <div style="margin-right:10px">
                              <div>Uab<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.lowUab | noDataFormat}}kV</span>

                              </div>
                              <div>Ubc<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.lowUbc | noDataFormat}}kV</span>
                              </div>
                              <div>Uca<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.lowUca | noDataFormat}}kV</span>
                              </div>
                            </div>
                            <div>
                              <div>Ia<span style="padding-left:5px;padding-right:15px">

                                {{item.iesmegtransformer.lowIa | noDataFormat}}A</span>
                              </div>
                              <div>Ib<span style="padding-left:5px;padding-right:15px">

                                {{item.iesmegtransformer.lowIb | noDataFormat}}A</span>
                              </div>
                              <div>Ic<span style="padding-left:5px;padding-right:15px">
                                {{item.iesmegtransformer.lowIc | noDataFormat}}A</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </Tooltip>

                    <Tooltip placement="right" theme="light">
                      <img
                              v-if="item.switchon == 1"
                              src="~@/assets/img/distributedPhotovoltaic/1.png"
                              height="22"
                              width="24"
                      />
                      <img
                              v-if="item.switchon == 0"
                              src="~@/assets/img/distributedPhotovoltaic/2.png"
                              height="22"
                              width="24"
                      />
                      <div slot="content">
                        <div>开关：{{item.switchon == 1 ? '关':'开'}}</div>
                      </div>
                    </Tooltip>


                    <Tooltip placement="right" theme="light">
                      <img
                              src="~@/assets/img/distributedPhotovoltaic/6.png"
                              height="20"
                              width="26"
                      />
                      <div slot="content">
                        <div class="tooltip-title">镇流器</div>
                        <p>有功功率：{{ item.moEquipPowerData.tActivePower | noDataFormat }}kW</p>
                        <p>A相电流：{{ item.moEquipPowerData.aCurrent | noDataFormat }}A</p>
                        <p>B相电流：{{ item.moEquipPowerData.bCurrent | noDataFormat }}A</p>
                        <p>C相电流：{{ item.moEquipPowerData.cCurrent | noDataFormat }}A</p>
                        <p>直流电压：{{ item.moDcVoltCurr.voltage | noDataFormat }}V</p>
                        <p>直流电流：{{ item.moDcVoltCurr.current | noDataFormat }}A</p>
                      </div>
                    </Tooltip>
                    <Tooltip placement="right" theme="light">
                      <img
                              src="~@/assets/img/distributedPhotovoltaic/4.png"
                              height="25"
                              width="25"
                      />
                      <div slot="content">
                        <div class="tooltip-title">汇流器</div>

                        <div style="display: flex">
                          <div style="margin-right:15px">
                            <p v-for="(voltages,voltagesIndex) in item.moStringFormationData.voltages" v-if="voltages"
                               :key="'voltages'+voltagesIndex">
                              {{voltagesIndex + 1}}路电压：{{ voltages | noDataFormat }}V</p>
                          </div>
                          <div>
                            <p v-for="(current,currentIndex) in item.moStringFormationData.currents" v-if="current"
                               :key="'current'+currentIndex">
                              {{currentIndex + 1}}路电流：{{ current | noDataFormat }}A</p>
                          </div>
                        </div>
                      </div>
                    </Tooltip>
                    <Tooltip placement="right" theme="light">
                      <img
                              src="~@/assets/img/distributedPhotovoltaic/3.png"
                              height="18"
                              width="31"
                      />
                      <div slot="content">
                        光伏阵列
                      </div>
                    </Tooltip>

                  </div>
                </div>
                <div class="content--none" v-else>
                  <div class="none"></div>
                </div>
              </template>

              <div class="part-1-legend"></div>
            </div>
            <div class="electric-legend">
              <div v-for="(item, index) in legendArr" :key="item.name + index">
                <div
                        :style="{
                    background: `url(${item.url}) no-repeat center / contain`
                  }"
                ></div>
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="part-2">
            <div class="left">
              <div class="run-indicator-analysis">
                <div class="container-title">
                  <div class="icon"></div>
                  光伏运行指标分析
                </div>
                <div class="details">
                  <div v-for="(item, index) in runIndicatorArr" :key="index">
                    <div>{{ item.name }}</div>
                    <div>{{ item.value }}</div>
                  </div>
                </div>
              </div>
              <div class="environmental-parameter-information ">
                <div class="container-title">
                  <div class="icon"></div>
                  环境参数信息
                </div>
                <div class="details">
                  <div
                          v-for="(item, index) in environmentalParameterArr"
                          :key="index"
                  >
                    <div>{{ item.name }}</div>
                    <div>{{ item.value }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="middle">
              <div class="container-title">
                <div class="icon"></div>
                光伏日发电功率曲线
              </div>
              <div id="powerChart"></div>
            </div>
            <div class="right">
              <div class="container-title">
                <div class="icon"></div>
                光伏日发电量曲线
              </div>
              <div id="energyChart"></div>
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
  </div>
</template>

<script>
import echart from "echarts";
import { getEnv, listPower, listData, getAll, runIndex } from "@/api/scada";

export default {
    name: "test",
    props: {},
    data() {
        return {
            lineArr: {
                twoEnergyInfos: []
            },
            legendArr: [
                {
                    name: "变压器",
                    url: require("../../../../assets/img/distributedPhotovoltaic/5.png")
                },
                {
                    name: "开关-开",
                    url: require("../../../../assets/img/distributedPhotovoltaic/2.png")
                },
                {
                    name: "开关-关",
                    url: require("../../../../assets/img/distributedPhotovoltaic/1.png")
                },
                {
                    name: "逆变器",
                    url: require("../../../../assets/img/distributedPhotovoltaic/6.png")
                },
                {
                    name: "汇流器",
                    url: require("../../../../assets/img/distributedPhotovoltaic/4.png")
                },
                {
                    name: "光伏阵列",
                    url: require("../../../../assets/img/distributedPhotovoltaic/3.png")
                }
            ],
            runIndicatorArr: [
                {value: 0, name: "理论功率(kW)"},
                {value: 0, name: "可调裕度(kW)"},
                {value: 0, name: "单位发电功率(kW)"},
                {value: 0, name: "单位时间发电收益(元/h)"},
                {value: 0, name: "系统效率(%)"},
                {value: 0, name: "当日节能减排"}
            ],
            environmentalParameterArr: [
                {value: 0, name: "环境温度(℃)"},
                {value: 0, name: "环境相对湿度(%)"},
                {value: 0, name: "太阳能辐射度(MWh/cm²)"},
                {value: 0, name: "气压(Pa)"}
            ],
            powerOption: {
                textStyle: {
                    fontWeight: 400,
                    fontSize: 14,
                    color: "#666"
                },
                tooltip: {
                    trigger: "axis"
                },

                grid: {
                    left: "2%",
                    right: "5%",
                    bottom: "2%",
                    top: "14%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#E8E8E8",
                            width: 1
                        }
                    }
                },

                yAxis: {
                    name: "单位(MW)",
                    nameTextStyle: {
                        fontWeight: 400,
                        fontSize: 14,
                        color: "#666"
                    },
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E8E8E8"
                        }
                    }
                },
                series: [
                    {
                        name: "发电功率(MW)",
                        showSymbol: false,
                        data: [],
                        type: "line",
                        itemStyle: {
                            color: "#0893FD"
                        },
                        areaStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(33, 131, 222, 1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(8, 148, 253, 0.06)"
                                        }
                                    ],
                                    global: false
                                }
                            }
                        },
                        smooth: false
                    }
                ]
            },
            energyOption: {
                textStyle: {
                    fontWeight: 400,
                    fontSize: 14,
                    color: "#666"
                },
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: "2%",
                    right: "5%",
                    bottom: "2%",
                    top: "14%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#E8E8E8",
                            width: 1
                        }
                    }
                },

                yAxis: {
                    name: "单位(MW)",
                    nameTextStyle: {
                        fontWeight: 400,
                        fontSize: 14,
                        color: "#666"
                    },
                    type: "value",
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E8E8E8"
                        }
                    }
                },
                series: [
                    {
                        name: "发电量(MW)",
                        showSymbol: false,
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: "line",
                        itemStyle: {
                            color: "#90D66E"
                        },
                        areaStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(144, 214, 110, 1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(144, 214, 110, 0.06)"
                                        }
                                    ],
                                    global: false
                                }
                            }
                        },
                        smooth: false
                    }
                ]
            }
        };
    },
    computed: {},
    created() {
    },
    mounted() {
        let powerChart = echart.init(document.querySelector("#powerChart"));
        let energyChart = echart.init(document.querySelector("#energyChart"));
        getEnv().then((res) => {
            if (res.code === 200) {
                let data = res.result || {};
                //环境参数信息
                this.environmentalParameterArr[0].value = +data.temperature;
                this.environmentalParameterArr[1].value = +data.humidity;
                this.environmentalParameterArr[2].value = +data.irradiation;
                this.environmentalParameterArr[3].value = +data.press;
            }
        });
        listPower().then((res) => {
            if (res.code === 200) {
                let data = res.result || {};
                this.energyOption.series[0].data = data.map(
                    (item) => +item.generationValue
                );
                this.energyOption.xAxis.data = data.map((item) => item.statisticDate);
                energyChart.setOption(this.energyOption);
            }
        });
        listData().then((res) => {
            if (res.code === 200) {
                let data = res.result || {};
                this.powerOption.series[0].data = data.map((item) => +item.loadData);
                this.powerOption.xAxis.data = data.map((item) => item.dataTime);
                powerChart.setOption(this.powerOption);
            }
        });
        getAll().then((res) => {
            console.log(res);
            if (res.code === 200) {
                this.lineArr = res.result || {};
            }
        });
        runIndex().then((res) => {
            console.log(res);
            if (res.code === 200) {
                let data = res.result || {};

                this.runIndicatorArr[0].value = data.thePower;
                this.runIndicatorArr[1].value = data.ktyd;
                this.runIndicatorArr[2].value = data.rtPower;
                this.runIndicatorArr[3].value = data.yield;
                this.runIndicatorArr[4].value = data.transEff;
                this.runIndicatorArr[5].value = data.co2;
            }
        });
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style scoped lang="scss">
  .tooltip-title {
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #999;
    padding-bottom: 2px;
  }

  .bg-style {
    background-size: contain;
    width: 100%;
    height: 100%;
  }

  .container-title {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .icon {
      margin-right: 10px;
      width: 4px;
      height: 16px;
      background-color: #0893fd;
    }
  }

  .container {
    width: 100%;
    height: 100%;
    .part-1 {
      width: 100%;
      padding-left: 40px;
      display: flex;
      justify-content: space-between;
      .electric-bus {
        width: calc(100% - 253px);
        .title {
          display: flex;
          justify-content: center;
          margin-top: 20px;
          > div:first-child {
            width: 32px;
            font-size: 16px;
            font-weight: 400;
            color: #343434;
            line-height: 30px;
            margin-right: 10px;
          }
          > div:last-child {
            height: 12px;
            font-size: 14px;
            font-weight: 400;
            color: #9a9a9a;
            line-height: 30px;
          }
        }
        .isTopBorder {
          border-top: 10px solid #369afe;
        }
        .isLeftBorder {
          border-left: 1px solid #bebebe;
        }
        .bus-border {
          border-bottom: 1px solid #bebebe;
          border-left: 1px solid #bebebe;
          height: 53px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          > div:first-child {
            font-size: 16px;
            font-weight: 400;
            color: #343434;
            line-height: 30px;
            margin: 0 10px;
          }
          > div:last-child {
            font-size: 14px;
            font-weight: 400;
            color: #9a9a9a;
            line-height: 30px;
          }
        }
        .bus-status {
          display: flex;
          justify-content: space-between;
          padding-left: 20px;
          .status-icon-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: relative;
            height: 330px;
            padding-top: 30px;
            .line {
              width: 2px;
              height: 330px;
              background: #bebebe;
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
            }
            img {
              position: relative;
              z-index: 1000;
            }
          }
        }
      }
      .electric-legend {
        width: 253px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        > div {
          display: flex;
          justify-content: center;
          width: 100%;
          margin-top: 25px;
          > div:first-child {
            width: 25px;
            height: 25px;
          }
          > div:last-child {
            font-size: 14px;
            width: 70px;
            padding-left: 10px;
            font-weight: 400;
            color: #9a9a9a;
          }
        }
      }
    }
    .part-2 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 437px;
      padding-top: 35px;
      padding-left: 20px;
      > div {
        height: 100%;
      }
      .left {
        width: 266px;
        margin-right: 60px;
        .environmental-parameter-information {
          .details {
            width: 266px;
            padding: 10px;
            height: 133px;
            background: #f7f7f7;
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > div {
              display: flex;
              justify-content: space-between;
              > div:first-child {
                width: 190px;
              }
            }
          }
        }
        .run-indicator-analysis {
          .details {
            width: 266px;
            height: 200px;
            background: #f7f7f7;
            padding: 10px;
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            > div {
              display: flex;
              justify-content: space-between;
              > div:first-child {
                width: 190px;
              }
            }
          }
        }
      }
      .middle,
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        > div:last-child {
          flex: 1;
        }
      }
    }
  }

  .content--none {
    padding: 50px;
    .none {
      text-align: center;
      background-image: url("~@/assets/img/zwsj.png");
      background-position: center;
      background-repeat: no-repeat;
      color: #999;
      height: 200px;
      background-size: 190px;
    }
  }
</style>
